<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>usercenter</title>
<link
	href="${pageContext.request.contextPath}/frontdevel/css/bootstrap.css"
	rel='stylesheet' type='text/css' />
<jsp:include page="header.jsp"></jsp:include>
<style type="text/css">
.table {
	color: #000;
	margin-top: 30px;
}

#bg {
	width: 100%;
	height: 600px;
	background:
		url(${pageContext.request.contextPath}/frontdevel/images/usercenterbg.jpg);
}

.status {
	display: none;
}
</style>
</head>
<body>
<!-- 上传按钮弹出层 -->
<div class="layui-row" id="uploadform" style="display: none;">
	<form class="form-horizontal">
		<input type="test" id="mfuid">
		<input type="test" id="mtuid">
		<input type="test" id="moid">
		<div class="form-group">
			<input type="file" class="form-control" id="upload1">
		</div>
		<div class="form-group">
			<input type="file" class="form-control" id="upload2">
		</div>
		<div class="form-group">
			<input type="file" class="form-control" id="upload3">					
		</div>
		<div class="form-group">			
			<button id="myupload" class="btn btn-default">提交</button>
		</div>
	</form>
</div>
<!--上传按钮弹出层 -->
	<!--start-home-->
	<div id="home" class="header">
		<!-- 顶部导航栏 -->
		<jsp:include page="topbar.jsp"></jsp:include>
		<!-- 顶部导航栏结束 -->

		<div class="banner two">
			<div class="container">
				<div class="pag-nav">
					<ul class="p-list">
						<li><a href="index.html">Home</a></li> &nbsp;&nbsp;/&nbsp;
						<li class="act">&nbsp; USERCENTER</li>
					</ul>
				</div>

			</div>

		</div>
		<!--查看个人中心的订单  -->


		<c:if test="${user.ulevel==1}">
			<table class="table table-bordered">
				<tr>
					<td>订单编号</td>
					<td>寄养家庭名称</td>
					<td>宠物昵称</td>
					<td>预约结束日期</td>
					<td>已付押金</td>
					<td>未结金额</td>
					<td>操作</td>
				</tr>
				<c:forEach items="${orders}" var="o">
					<tr class="ortr">
						<td>${o.oid}</td>
						<td>${o.otuname}</td>
						<td>${o.opetname}</td>
						<td>${o.oenddate}</td>
						<td>${o.odeposit}</td>
						<td>${o.ofinapay}</td>
						<td><input type="button" class="btn btn-info" value="订单完成"></td>
						<td style="display: none">${o.ostatus}</td>
						<td style="display: none;">${o.ouid}</td>
					</tr>

				</c:forEach>
			</table>
		</c:if>
		<c:if test="${user.ulevel==2}">
			<table class="table table-bordered">
				<tr>
					<td>订单编号</td>
					<td>下单用户名称</td>
					<td>宠物昵称</td>
					<td>预约结束日期</td>
					<td>已付押金</td>
					<td>订单状态</td>
					<td>上传资料</td>

				</tr>

				<c:forEach items="${orders}" var="o">
					<tr class="orup">
						<td>${o.oid}</td>
						<td>${user.uname}</td>
						<td>${o.opetname}</td>
						<td>${o.oenddate}</td>
						<td>${o.odeposit}</td>
						<td>${o.ostatus==1?'已完成':'未完成'}</td>
						<td><input type="button" class="btn btn-info myupload"
							value="上传"></td>
						<td style="display: none">${o.ostatus}</td>
						<td style="display: none;">${o.ouid}</td>
					</tr>

				</c:forEach>
			</table>
		</c:if>
		<div id="bg"></div>
	</div>
	<!-- wwb 4.30 start-->
	<table class="layui-hide" id="test" lay-filter="test"></table>
	<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit"></a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
	<!--跳转到支付页面  -->
	<script type="text/javascript">
		/*设置id 如果用户已经支付过剩余的前 就设置未结金额为0 并 按钮禁用  */
		for (let i = 0; i < $('.ortr').length; i++) {
			$('.ortr').get(i).children[7].setAttribute('id', 'ostatus'
					+ (i + 1));
			$('.ortr').get(i).children[6].children[0].setAttribute('id',
					'orderAffirm' + (i + 1));
			$('.ortr').get(i).children[5].setAttribute('id', 'ofinapay'
					+ (i + 1));
			$('.ortr').get(i).children[0].setAttribute('id', 'oid' + (i + 1));
			$('.ortr').get(i).children[4].setAttribute('id', 'odeposit'
					+ (i + 1));
			$('.ortr').get(i).children[8].setAttribute('id', 'ouid' + (i + 1));

			if ($("#ostatus" + (i + 1)).text() == 1) {
				$("#ofinapay" + (i + 1)).text("0");
				$("#orderAffirm" + (i + 1)).attr("disabled", "disabled");
				$("#orderAffirm" + (i + 1)).val("已完成");
			}
			$("#orderAffirm" + (i + 1))
					.click(
							function() {
								console.log($("#oid" + (i + 1)).text());
								console.log($("#odeposit" + (i + 1)).text());
								var ofinapay = $("#odeposit" + (i + 1)).text();
								var oid = $("#oid" + (i + 1)).text();
								var ouid = $("#ouid" + (i + 1)).text();
								window.localStorage.setItem('ofinapay',
										ofinapay);
								window.localStorage.setItem('oid', oid);
								window.localStorage.setItem('ouid', ouid);
								location.href = "${pageContext.request.contextPath}/frontdevel/appliy/index1.jsp";
							});
		}

		for (let i = 0; i < $('.orup').length; i++) {			
			$('.orup').get(i).children[6].children[0].setAttribute('id',
					'orderUp' + (i + 1));			
			$('.orup').get(i).children[0].setAttribute('id', 'oid' + (i + 1));			
			$('.orup').get(i).children[8].setAttribute('id', 'ouid' + (i + 1));			
			layui.use('form', function() {
				var form = layui.form;
				$("#orderUp" + (i + 1)).on('click', function() {
					layer.open({
						type : 1,
						title : "上传资料",
						//skin : 'layui-layer-rim', //加上边框
						area : [ '400px', '300px' ], //宽高
						content : $("#uploadform"),
						shade : [ 0.8, '#393D49' ],
					});
				})
			});
		}

		var $ = layui.$, active = {
			reload : function() {
				var demoReload = $('#demoReload');

				//执行重载
				table.reload('testReload', {
					page : {
						curr : 1
					//重新从第 1 页开始
					},
					where : {
						key : demoReload.val()
					}
				});
			}
		};

		$('.demoTable .layui-btn').on('click', function() {
			var type = $(this).data('type');
			active[type] ? active[type].call(this) : '';
		});
		/* 	}); */
	</script>
	<!-- wwb 4.30 end -->
	<!---- footer --->
	<div class="footer text-center">
		<div class="container">
			<div class="footer-grids">
				<div class="col-md-6 footer-text">
					<h3>About Us</h3>
					<p>Lorem Ipsum is simply dummy text of the printing and
						typesetting industry.Lorem Ipsum has been the industry's standard
						dummy text ever since, Lorem Ipsum has been the industry's
						standard dummy text ever since the 1500s.</p>
					<p>Lorem Ipsum is simply dummy text of the printing and
						typesetting industry.Lorem Ipsum has been the industry's standard
						dummy text ever since, Lorem Ipsum has been the industry's
						standard dummy text ever since the 1500s.</p>
					<a class="read" href="single.html">Read More</a>
				</div>
				<div class="col-md-6 footer-info">
					<h3>Get In Touch</h3>
					<p>Lorem Ipsum is simply dummy text of the printing and
						typesetting industry.Lorem Ipsum has been the industry's standard
						dummy text ever since,</p>
					<div class="support">
						<input type="text" class="text" value="Enter email..."
							onfocus="this.value = '';"
							onblur="if (this.value == 'Enter email...') {this.value = 'Enter email...';}">
						<input type="submit" value="SUBSCRIBE" class="botton">
					</div>
				</div>
				<div class="clearfix"></div>
			</div>
		</div>
	</div>
	<div class="copy">
		<p>
			Copyright &copy; 2015.Company name All rights reserved.<a
				target="_blank" href="http://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a>
		</p>
	</div>
	<!--start-smoth-scrolling-->
	<script type="text/javascript">
		jQuery(document).ready(function($) {
			$(".scroll").click(function(event) {
				event.preventDefault();
				$('html,body').animate({
					scrollTop : $(this.hash).offset().top
				}, 1000);
			});
		});
	</script>
	<!--start-smoth-scrolling-->
	<!-- <script type="text/javascript">
		$(document).ready(function() {
			/*
			var defaults = {
				containerID: 'toTop', // fading element id
				containerHoverID: 'toTopHover', // fading element hover id
				scrollSpeed: 1200,
				easingType: 'linear' 	
			};
			 */

			$().UItoTop({
				easingType : 'easeOutQuart'
			});			
		});
	</script> -->
	<a href="#home" id="toTop" class="scroll" style="display: block;">
		<span id="toTopHover" style="opacity: 1;"> </span>
	</a>
</body>
</html>